"use client"
import React from "react"
import Image from "next/image"
import { useParams, useRouter } from "next/navigation"
import { imgList } from "@/data"

const PhotoModal = () => {
  const { id } = useParams()
  const router = useRouter()
  const img = imgList.find((item) => item.id.toString() === id)

  if (!img) return null

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-gray-500/[.8]" onClick={() => router.back()}>
      <div className="container mx-auto flex items-center justify-center px-5">
        <Image className="max-w-[600px] rounded-lg" src={img.path} alt="image" width={1328} height={1328} />
      </div>
    </div>
  )
}

export default PhotoModal
